import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { NavBar, Space, Toast, Card, IndexBar, List,Tag } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { Search } from "react-vant";
import http from "../../api/http";
import { editCity } from "../../store/CitySlice";
import { useDispatch } from "react-redux";
function Index() {
  const { type } = useParams();
  // console.log(type);
  const dispatch=useDispatch()
  const navigate = useNavigate();
  const [value, setValue] = useState("");
  const [CityList, setCityList] = useState([]);
  const [HotList, setHotList] = useState([]);
  const getCityList = async () => {
    const res = await http.get("/api/city");
    const { data } = res.data;
    console.log(data);
    setCityList(data.city);
    setHotList(data.hotCities);
  };
  useEffect(() => {
    getCityList();
  }, []);

  const handleToHome=(city)=>{
    dispatch(editCity({city,type}))
    navigate("/")
  }
  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>城市导航页</NavBar>
      <Search
        value={value}
        onChange={setValue}
        clearable
        placeholder="请输入搜索关键词"
      />

      <Card title="热门城市">
        <div>
          {
            HotList?.map((item,ind)=>(
              <Tag key={ind} style={{margin:15}} onClick={()=>handleToHome(item.name)}>{item.name}</Tag>
            ))
          }
        </div>
      </Card>
      <Card title="城市列表">
        <div style={{ height: window.innerHeight }}>
          <IndexBar>
            {CityList?.map((group) => {
              const { initial, list } = group;
              return (
                <IndexBar.Panel
                  index={initial}
                  title={`${initial}`}
                  key={`${initial}`}
                >
                  <List>
                    {list.map((item, index) => (
                      <List.Item key={index}  onClick={()=>handleToHome(item.name)}>{item.name}</List.Item>
                    ))}
                  </List>
                </IndexBar.Panel>
              );
            })}
          </IndexBar>
        </div>
      </Card>
    </div>
  );
}

export default Index;
